<template>
    <div>
        <el-card class="box-card">
            <div slot="header">
                <span>用户组</span>
                <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
            </div>
            <el-row :gutter="20">
                <el-col :span="24">
                    <div style="padding-top: 20px">
                        <el-card>
                            <div slot="header">
                                <span>用户列表</span>
                                <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
                            </div>
                            <el-table :data="userList"
                                      stripe style="width: 100%">
                                <el-table-column
                                        label="序号"
                                        type="index"
                                        width="50">
                                </el-table-column>
                                <el-table-column :formatter="emailFormat" prop="email" label="邮箱"
                                                 width="180"></el-table-column>
                                <el-table-column :formatter="roleFormat" prop="roleName" label="角色"
                                                 width="180"></el-table-column>
                                <el-table-column :formatter="dateFormat" prop="createTime"
                                                 label="注册时间"></el-table-column>
                                <el-table-column :formatter="statusFormat" prop="status" label="状态"></el-table-column>

                            </el-table>
                        </el-card>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>

</template>

<script>
    import {getUserListByGroupIdServer} from '../../services'

    import {dateFormat} from '../../common'

    export default {
        name: "UserGroupInfo",
        props: ['userGroup'],
        data() {
            return {
                userList: []
            }
        },
        created() {
            this.getUserListByGroupId();
        },
        methods: {

            emailFormat(row) {
                const strs = row.email.split('@');
                const ename = strs[0]
                return ename.substring(0, 1) + "..." + ename.substring(ename.length - 2, ename.length - 1) + '@' + strs[1];
            },

            statusFormat(row) {
                const status = row.status;
                if (status === "NORMAL") {
                    return "正常"
                } else {
                    return "状态未知"
                }
            },

            roleFormat(row) {
                const roleName = row.roleName;
                if (roleName === "GROUP_ADMIN") {
                    return '组管理员';
                } else if (roleName === "GROUP_USER") {
                    return "组用户"
                } else {
                    return "未定义"
                }
            },

            dateFormat(row) {

                const time = row.createTime
                return dateFormat(time, 'YYYY-MM-DD')
            },

            getUserListByGroupId() {
                this.userList = []
                const id = JSON.parse(localStorage.getItem('user')).userGroupId
                // console.log(id)
                getUserListByGroupIdServer(id).then(res => {
                    // console.log(res.data)
                    this.userList = res.data;
                })
            }
        }
    }
</script>

<style scoped>

</style>